<template>
	<view class="">
		<view class="title-bar">
			<!-- 如果不是一级页面，显示返回按钮 -->
			<view v-if="isSubPage" class="back-btn" @click="goBack">
				<image src="/static/back.png" mode="aspectFill" class=""></image>
			</view>
			<text class="title">用户信息</text>
		</view>
		<view class="page-container">
			<!-- 个人信息卡片 -->
			<view class="info-container">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatar" @click="chooseAvatar">
					</image>
					<text class="edit-avatar">修改头像</text>
				</view>

				<view class="form-container">
					<view class="form-item">
						<text class="label">昵称</text>
						<input class="input" v-model="userInfo.username" placeholder="请输入昵称" />
					</view>

					<view class="form-item">
						<text class="label">签名</text>
						<input class="input" v-model="userInfo.introduce" placeholder="请输入个性签名" />
					</view>

					<view class="form-item">
						<text class="label">手机号</text>
						<input class="input" v-model="userInfo.phone" placeholder="请输入手机号" />
					</view>

					<!-- <view class="form-item">
						<text class="label">邮箱</text>
						<input class="input" v-model="userInfo.email" placeholder="请输入邮箱" />
					</view> -->
				</view>

				<button class="save-btn" @click="saveUserInfo">保存修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		userApi
	} from '@/api/user';

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				globaApi: '',
				isSubPage: true,
				userInfo: {
					avatar: '',
					username: '',
					introduce: '',
					phone: '',
					// email: ''
				},
				token: ''
			};
		},
		mounted() {
			this.getUserInfo()
		},
		methods: {
			goBack() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			// 获取用户信息
			async getUserInfo() {
				try {
					const result = await userApi.getUserInfo()
					this.userInfo.username = result.username
					this.userInfo.avatar = result.avatar
					this.userInfo.introduce = result.introduce
					this.userInfo.phone = result.phone
					console.log('获取用户信息成功：', result);
				} catch (error) {
					console.error('获取用户信息失败：', error);
				}
			},
			// 选择头像
			async chooseAvatar() {
				try {
					const {
						tempFilePaths
					} = await uni.chooseImage({
						count: 1, // 一次只选择一张图片
						sizeType: ['compressed'], // 压缩图片，减少上传数据量
						sourceType: ['album', 'camera'] // 支持从相册选择或使用相机拍照
					});
					// 判断是否选择了图片
					if (tempFilePaths && tempFilePaths.length > 0) {
						// 显示上传中提示
						uni.showLoading({
							title: '上传中...'
						});

						// 2. 调用上传头像接口
						const result = await userApi.uploadAvatar(tempFilePaths[0]);

						// 3. 更新用户信息
						// 更新本地头像 URL
						this.userInfo.avatar = result[0];
						// 更新用户信息
						await this.saveUserInfo();
						await this.getUserInfo();


						// 提示上传成功
						uni.showToast({
							title: '头像更新成功'
						});
					}

				} catch (error) {
					console.error('上传头像失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '上传失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
				}

			},

			// 保存用户信息
			async saveUserInfo() {
				// 表单验证
				if (!this.userInfo.username.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				// 手机号格式验证
				if (this.userInfo.phone && !/^1\d{10}$/.test(this.userInfo.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				try {
					const result = await userApi.updateUserInfo(this.userInfo)
					uni.showLoading({
						title: '保存中...'
					});
					uni.showLoading({
						title: '保存成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 700)
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				} catch (error) {
					console.error('保存失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '保存失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
				}

			}
		}
	};
</script>

<style scoped>
	.title-bar {
		display: flex;
		align-items: center;
		background-color: #F9CB43;
		height: 170rpx;
		padding: 0 20rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		left: 20rpx;
		top: 60%;
		transform: translateY(-50%);
	}

	.back-btn image {
		width: 43rpx;
		height: 40rpx;
	}

	.title {
		font-size: 42rpx;
		font-weight: bold;
		width: 100%;
		text-align: center;
		margin-top: 25rpx;
	}

	.page-container {
		padding: 40rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.info-container {
		background-color: white;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.1);
	}

	.avatar-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.edit-avatar {
		font-size: 28rpx;
		color: #F9CB43;
	}

	.form-container {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.input {
		width: 93%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	/* 	.textarea {
		width: 93%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	} */

	.save-btn {
		width: 100%;
		height: 80rpx;
		background-color: #F9CB43;
		color: white;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}
</style>